<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>附近/消息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <script src="../js/vue.js"></script>

    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/ms.message.css">
    <style>
        .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
            background-color: #FF4777;
        }
        
        .mui-slider-progress-bar {
            background-color: #007AFF;
        }
        
        .yty-cd {
            background-color: #0d0c14;
        }
        
        .mui-pull-loading {
            /*color: #fcfcfc;*/
        }
    </style>
</head>

<body>
    <header>
        <span class="ms-near-screen" onclick="doscreen()"></span>
    </header>
    <div class="mui-content ms-body">
        <div id="slider" class="mui-slider mui-fullscreen  yty-cd">
            <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ms-header">
                <a class="mui-control-item mui-active  ms-column " href="#item1mobile">
                    <img src="../images/circle.png" class="ms-near-circle" alt="附近"> &nbsp; 附近
                </a>
                <a class="mui-control-item" href="#item2mobile">
							消息
						</a>
            </div>
            <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>

            <div class="mui-slider-group">
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                    <div id="scroll1" class="mui-scroll-wrapper">
                        <div class="mui-scroll" id="ms-near">
                            <ul class="mui-table-view ms-tabke-view">
                                <li class="mui-table-view-cell ms-view-table mui-media" v-for="item in items" :ms-data='item.user_id'>
                                    <a href="javascript:;" @click='go(item.user_id)'>
                                        <img class="mui-media-object mui-pull-left ms-avatar-img" v-bind:src="item.headimg" onerror="this.src='../images/avatar.jpg';this.onerror=null;">
                                        <div class="mui-media-body mui-row ms-nm-content">
                                            <div class="mui-col-xs-8 ms-near-name">
                                                <span class="ms-name-content">{{item.user_name}}</span>
                                                <div style="clear:both;">

                                                </div>
                                                <span style="background-color:#14A5EB;" class='ms-sexage-div' v-if="item.sex=='1'"><img src="../images/man.png" width="20px" height="20px" alt="" class="ms-icon-man"><span class="ms-age-content">{{item.age}}</span></span>
                                                <span v-else style="background-color:#ff4777;" class='ms-sexage-div'><img src="../images/ladies.png" width="20px" height="20px" alt="" class="ms-icon-man"><span class="ms-age-content">{{item.age}}</span></span>
                                            </div>

                                            <div class="mui-col-xs-4 ms-nm-time ">
                                                <span class="ms-icon-position">{{ calDis(item.distance) }}</span>
                                                <span class="ms-near-time">{{ calTim(item.location_time) }}</span>

                                            </div>
                                        </div>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll" id="ms-messages">
                            <ul id="yty-tabk" class="mui-table-view">
                                <li class="mui-table-view-cell mui-media ms-view-table " v-for="messages in items" style="height: 80px;" :ms-data='messages.user_id' @click='go(messages.user_id)'>
                                    <div class="mui-slider-right mui-disabled">
                                        <a class="mui-btn mui-btn-red">删除</a>
                                    </div>

                                    <div class="mui-slider-handle mui-table " style="background-color: rgba(0,0,0,0.0);">
                                        <img class="mui-media-object mui-pull-left ms-avatar-img" v-bind:src="messages.headimg" onerror="this.src='../images/avatar.jpg';this.onerror=null;">

                                        <div class="mui-media-body mui-row ms-nm-content">
                                            <div class="mui-col-xs-8">
                                                <span class="ms-messages-name">{{messages.user_name}}</span><br>
                                                <span class='mui-ellipsis ms-messages-content'>{{ messages.record_content}}</span>
                                            </div>
                                            <p class="mui-col-xs-4 ms-messages-content ms-nm-time">{{ chTime(messages.record_time) }}</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/mui.min.js"></script>
    <script src="../js/mui.pullToRefresh.js"></script>
    <script src="../js/ms.message.js "></script>

    <script>
        (function($) {
            $('.mui-scroll-wrapper').scroll({
                indicators: true //是否显示滚动条
            });


        })(mui);
    </script>
</body>

</html>